<template>
  <div class="evaluation-container">
    <!-- 头部区域 -->
    <div class="gradient-header">
      <div class="header-decoration"></div>
      <h1>
        <i class="fas fa-star"></i>
        危机干预处理评价系统
        <i class="fas fa-star"></i>
      </h1>
      <p>
        您的专业评价将帮助我们持续优化服务质量，为更多有需要的人提供精准有效的危机干预
      </p>
    </div>

    <!-- 评价卡片 -->
    <div class="evaluation-card">
      <!-- 卡片头部 -->
      <div class="card-header">
        <h2>
          <i class="fas fa-clipboard-check"></i>
          干预服务专业评价
        </h2>
      </div>

      <!-- 卡片主体 -->
      <div class="card-body">
        <form>
          <!-- 响应及时性评价 -->
          <div class="evaluation-section">
            <div class="section-title">
              <i class="fas fa-bolt"></i>
              响应及时性评价
            </div>
            <div class="stars-container">
              <div class="star-rating">
                <input
                  type="radio"
                  :id="'timeliness-5'"
                  value="5"
                  v-model="ratings.timeliness"
                  class="star-input"
                />
                <label :for="'timeliness-5'" class="star-label">
                  <i class="fas fa-star"></i>
                </label>

                <input
                  type="radio"
                  :id="'timeliness-4'"
                  value="4"
                  v-model="ratings.timeliness"
                  class="star-input"
                />
                <label :for="'timeliness-4'" class="star-label">
                  <i class="fas fa-star"></i>
                </label>

                <input
                  type="radio"
                  :id="'timeliness-3'"
                  value="3"
                  v-model="ratings.timeliness"
                  class="star-input"
                />
                <label :for="'timeliness-3'" class="star-label">
                  <i class="fas fa-star"></i>
                </label>

                <input
                  type="radio"
                  :id="'timeliness-2'"
                  value="2"
                  v-model="ratings.timeliness"
                  class="star-input"
                />
                <label :for="'timeliness-2'" class="star-label">
                  <i class="fas fa-star"></i>
                </label>

                <input
                  type="radio"
                  :id="'timeliness-1'"
                  value="1"
                  v-model="ratings.timeliness"
                  class="star-input"
                />
                <label :for="'timeliness-1'" class="star-label">
                  <i class="fas fa-star"></i>
                </label>
              </div>
            </div>
            <div class="rating-labels">
              <div>非常慢</div>
              <div>较慢</div>
              <div>一般</div>
              <div>比较快</div>
              <div>非常及时</div>
            </div>
          </div>

          <!-- 干预过程评价 -->
          <div class="evaluation-section">
            <div class="section-title">
              <i class="fas fa-tasks"></i>
              干预过程专业性评价
            </div>
            <div class="stars-container">
              <div class="star-rating">
                <input
                  type="radio"
                  :id="'process-5'"
                  value="5"
                  v-model="ratings.process"
                  class="star-input"
                />
                <label :for="'process-5'" class="star-label">
                  <i class="fas fa-star"></i>
                </label>

                <input
                  type="radio"
                  :id="'process-4'"
                  value="4"
                  v-model="ratings.process"
                  class="star-input"
                />
                <label :for="'process-4'" class="star-label">
                  <i class="fas fa-star"></i>
                </label>

                <input
                  type="radio"
                  :id="'process-3'"
                  value="3"
                  v-model="ratings.process"
                  class="star-input"
                />
                <label :for="'process-3'" class="star-label">
                  <i class="fas fa-star"></i>
                </label>

                <input
                  type="radio"
                  :id="'process-2'"
                  value="2"
                  v-model="ratings.process"
                  class="star-input"
                />
                <label :for="'process-2'" class="star-label">
                  <i class="fas fa-star"></i>
                </label>

                <input
                  type="radio"
                  :id="'process-1'"
                  value="1"
                  v-model="ratings.process"
                  class="star-input"
                />
                <label :for="'process-1'" class="star-label">
                  <i class="fas fa-star"></i>
                </label>
              </div>
            </div>
            <div class="rating-labels">
              <div>非常不满意</div>
              <div>不满意</div>
              <div>一般</div>
              <div>满意</div>
              <div>非常满意</div>
            </div>
          </div>

          <!-- 干预效果评价 -->
          <div class="evaluation-section">
            <div class="section-title">
              <i class="fas fa-chart-line"></i>
              干预效果评价
            </div>
            <div class="stars-container">
              <div class="star-rating">
                <input
                  type="radio"
                  :id="'effect-5'"
                  value="5"
                  v-model="ratings.effect"
                  class="star-input"
                />
                <label :for="'effect-5'" class="star-label">
                  <i class="fas fa-star"></i>
                </label>

                <input
                  type="radio"
                  :id="'effect-4'"
                  value="4"
                  v-model="ratings.effect"
                  class="star-input"
                />
                <label :for="'effect-4'" class="star-label">
                  <i class="fas fa-star"></i>
                </label>

                <input
                  type="radio"
                  :id="'effect-3'"
                  value="3"
                  v-model="ratings.effect"
                  class="star-input"
                />
                <label :for="'effect-3'" class="star-label">
                  <i class="fas fa-star"></i>
                </label>

                <input
                  type="radio"
                  :id="'effect-2'"
                  value="2"
                  v-model="ratings.effect"
                  class="star-input"
                />
                <label :for="'effect-2'" class="star-label">
                  <i class="fas fa-star"></i>
                </label>

                <input
                  type="radio"
                  :id="'effect-1'"
                  value="1"
                  v-model="ratings.effect"
                  class="star-input"
                />
                <label :for="'effect-1'" class="star-label">
                  <i class="fas fa-star"></i>
                </label>
              </div>
            </div>
            <div class="rating-labels">
              <div>没有效果</div>
              <div>效果甚微</div>
              <div>有些效果</div>
              <div>比较有效</div>
              <div>非常有效</div>
            </div>
          </div>

          <!-- 专业建议 -->
          <div class="evaluation-section">
            <div class="section-title">
              <i class="fas fa-lightbulb"></i>
              专业改进建议
              <span class="optional">(选填)</span>
            </div>
            <div class="suggestion-box">
              <div class="suggestion-title">
                <i class="fas fa-comment-medical"></i>
                您的专业建议
              </div>
              <textarea
                v-model="suggestion"
                class="suggestion-textarea"
                placeholder="请分享您对危机干预流程、方法或效果的专业改进建议..."
              ></textarea>
            </div>
          </div>

          <!-- 综合评分 -->
          <div class="overall-score">
            <div class="score-decoration"></div>
            <div class="score-content">
              <div class="score-title">综合专业评分</div>
              <div class="overall-stars">
                <div v-for="index in 5" :key="index" class="star-container">
                  <i :class="['fas', getStarClass(index, overallScore)]"></i>
                </div>
              </div>
              <div class="score-display">
                <div class="score-label">您的评分：</div>
                <div class="score-value">{{ overallScore.toFixed(1) }}</div>
                <div class="score-unit">分</div>
              </div>
              <div class="score-progress-container">
                <div
                  class="score-progress"
                  :style="{ width: (overallScore / 5) * 100 + '%' }"
                  :class="getProgressBarClass(overallScore)"
                ></div>
              </div>
              <div class="progress-labels">
                <div>非常不满意</div>
                <div>非常满意</div>
              </div>
            </div>
          </div>

          <!-- 提交按钮 -->
          <div class="submit-container">
            <button
              type="button"
              @click="submitEvaluation"
              class="submit-button"
            >
              <i class="fas fa-paper-plane"></i>
              提交专业评价
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">
      网页由问小白生成，仅供参考<br />
      最后更新时间为2025-08-01 ，星期五<br />
      <a href="https://wenxiaobai.com">wenxiaobai.com</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "EvaluationSystem",
  data() {
    return {
      ratings: {
        timeliness: 0,
        process: 0,
        effect: 0,
      },
      suggestion: "",
    };
  },
  computed: {
    overallScore() {
      const categories = ["timeliness", "process", "effect"];
      let totalScore = 0;
      let answeredCount = 0;

      categories.forEach((category) => {
        if (this.ratings[category] > 0) {
          totalScore += this.ratings[category];
          answeredCount++;
        }
      });

      return answeredCount === 0 ? 0 : totalScore / answeredCount;
    },
  },
  methods: {
    getStarClass(index, score) {
      const fullStars = Math.floor(score);
      const hasHalfStar = score % 1 >= 0.5;

      if (index <= fullStars) {
        return "fa-star active";
      } else if (index === fullStars + 1 && hasHalfStar) {
        return "fa-star-half-alt active";
      } else {
        return "fa-star";
      }
    },
    getProgressBarClass(score) {
      if (score >= 4) {
        return "progress-high";
      } else if (score >= 3) {
        return "progress-medium";
      } else {
        return "progress-low";
      }
    },
    submitEvaluation() {
      if (this.overallScore === 0) {
        alert("请至少完成一项评分后再提交");
        return;
      }

      alert(
        `感谢您的专业评价！综合评分：${this.overallScore.toFixed(
          1
        )}分。您的反馈将帮助我们提升危机干预服务质量！`
      );

      // 重置表单
      this.ratings = {
        timeliness: 0,
        process: 0,
        effect: 0,
      };
      this.suggestion = "";

      // 滚动到顶部
      window.scrollTo({ top: 0, behavior: "smooth" });
    },
  },
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

.evaluation-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Noto Sans SC", sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
  box-sizing: border-box;
}

/* 头部区域样式 */
.gradient-header {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-decoration {
  position: absolute;
  top: -50px;
  right: -30px;
  width: 120px;
  height: 120px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.gradient-header h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.gradient-header h1 i {
  font-size: 32px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.gradient-header p {
  font-size: 16px;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 评价卡片样式 */
.evaluation-card {
  background-color: white;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.card-header {
  background-color: #f8fafc;
  padding: 20px 24px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
}

.card-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #2563eb;
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-header i {
  color: #3b82f6;
  font-size: 24px;
}

.card-body {
  padding: 24px;
}

/* 评价部分样式 */
.evaluation-section {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px dashed #e2e8f0;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-title i {
  color: #3b82f6;
  font-size: 24px;
}

.optional {
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
}

.stars-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.star-rating {
  display: flex;
}

.star-input {
  display: none;
}

.star-label {
  font-size: 32px;
  padding: 0 8px;
  cursor: pointer;
  color: #e5e7eb;
  transition: all 0.2s ease;
}

.star-label:hover {
  color: #fbbf24;
}

.star-input:checked ~ .star-label {
  color: #fbbf24;
}

.star-input:checked + .star-label {
  color: #f59e0b;
}

.rating-labels {
  display: flex;
  justify-content: space-between;
  max-width: 500px;
  margin: 0 auto;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

/* 建议框样式 */
.suggestion-box {
  background-color: #f8fafc;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #e2e8f0;
}

.suggestion-title {
  font-weight: 600;
  color: #2563eb;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.suggestion-textarea {
  width: 100%;
  min-height: 150px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.6;
  box-sizing: border-box;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.suggestion-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* 综合评分样式 */
.overall-score {
  background: linear-gradient(to bottom right, #f0fdf4, #ecfeff);
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 32px;
  border: 1px solid #bbf7d0;
  position: relative;
  overflow: hidden;
}

.score-decoration {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 70px;
  height: 70px;
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bbf7d0'%3E%3Cpath d='M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z' /%3E%3C/svg%3E");
  background-size: contain;
}

.score-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-title {
  font-size: 20px;
  font-weight: 700;
  color: #166534;
  margin-bottom: 16px;
}

.overall-stars {
  display: flex;
  margin: 16px 0;
}

.star-container {
  font-size: 28px;
  margin: 0 8px;
}

.star-container i {
  color: #e5e7eb;
}

.star-container i.active {
  color: #f59e0b;
}

.score-display {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.score-label {
  font-size: 20px;
  font-weight: 600;
  color: #374151;
}

.score-value {
  font-size: 48px;
  font-weight: 700;
  margin: 0 20px;
  min-width: 100px;
  text-align: center;
  color: #10b981;
}

.score-unit {
  font-size: 20px;
  font-weight: 600;
  color: #374151;
}

.score-progress-container {
  height: 16px;
  width: 100%;
  background-color: #e5e7eb;
  border-radius: 8px;
  margin: 16px 0;
  overflow: hidden;
}

.score-progress {
  height: 100%;
  border-radius: 8px;
  transition: width 1s ease;
}

.progress-high {
  background: linear-gradient(to right, #3b82f6, #10b981);
}

.progress-medium {
  background: linear-gradient(to right, #f59e0b, #fbbf24);
}

.progress-low {
  background: linear-gradient(to right, #ef4444, #f87171);
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 14px;
  color: #6b7280;
}

/* 提交按钮样式 */
.submit-container {
  display: flex;
  justify-content: center;
}

.submit-button {
  padding: 16px 48px;
  border-radius: 50px;
  background: linear-gradient(to right, #3b82f6, #2563eb);
  color: white;
  font-weight: 600;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* 页脚样式 */
.footer {
  text-align: center;
  font-size: 14px;
  color: #6b7280;
  margin-top: 32px;
}

.footer a {
  color: #3b82f6;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .evaluation-container {
    padding: 16px;
  }

  .gradient-header {
    padding: 24px 16px;
  }

  .gradient-header h1 {
    font-size: 24px;
    flex-direction: column;
    gap: 8px;
  }

  .card-body {
    padding: 16px;
  }

  .rating-labels {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .rating-labels div {
    flex: 1;
    min-width: 80px;
    text-align: center;
  }

  .score-value {
    font-size: 36px;
    margin: 0 12px;
    min-width: 80px;
  }

  .submit-button {
    padding: 14px 32px;
    font-size: 16px;
  }
}
</style>
